<template>
 <footer v-if="todos.length" class="todo-footer">
  <input type="checkbox" :checked="allDone" @change="toggleAll">
  <span>已办事项{{doneCount}}/全部事项{{ allCount }}</span>
  <button @click="$emit('clearDone')">清除已办</button>
  <button @click="$emit('clearAll')">清除所有</button>
 </footer>
  <h2 v-else>暂无待办事项</h2>
</template>

<script setup>
import {computed} from 'vue'
const props = defineProps({
  todos:{
    type:Array,
    required:true,
    default:()=>[]
  }
})
//如果只有一个,可以省略{}和return
// const allDone = cpmputed(()=> props.todos.every(todo)=>todo.done)
const allDone = computed(()=>{
  return props.todos.every(todo =>todo.done)
})
const doneCount = computed(()=>{
  return props.todos.filter(todo=>todo.done).length
})
const allCount = computed(()=>{
  return props.todos.length
})
const emit = defineEmits(['clearDone','clearAll','toggleAll'])
const toggleAll = (event)=>{
  emit('toggleAll',event.target.checked)
}
</script>

<style scoped>
.todo-footer{
      margin-top: 20px;
    background-color: #87ceeb;
    display: flex;
    padding: 10px 40px;
}
.todo-footer span{
      flex: 1;
    margin-left: 20px;
}
.todo-footer button{
      margin-left: 10px;
    padding-inline: 10px;
    cursor: pointer;
}
h2{
  text-align: center;
  margin-top: 10px;
}
</style>